<template>
  <div class="form-info">
    <h1>BMI 计算器</h1>
    <div >
        <label for="weight">姓名:</label>
        <input type="text" id="weight" v-model="name" required>
      </div>
      <div>
        <label for="weight">年龄:</label>
        <input type="number" id="weight" v-model.number="age" required>
      </div>
    <form @submit.prevent="calculateBMI">
      <div>
        <label for="weight">体重 (kg):</label>
        <input type="number" id="weight" v-model.number="weight" required>
      </div>
      <div>
        <label for="height">身高 (m):</label>
        <input type="float" id="height" v-model.number="height" required>
      </div>
      <div>
        <label for="weight">病史（如有病史请填写）:</label>
        <input type="text" id="history" v-model="history">
      </div>
      <button type="submit">诊断</button>
    </form>

    <div v-if="bmi !== null">
      <h2>BMI: {{ bmi }}</h2>
      <p>患者{{name}}的诊断结果为：{{ bmiResult }}</p>
      <p v-if="history.trim()!==''">患者存在{{ history }}病史</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name:'',
      age:0,
      weight: 0,
      height: 0,
      bmi: null,
      history:''
    }
  },
  methods: {
    calculateBMI() {
      if(this.weight == 0 || this.height == 0)return alert('请输入身高体重')
      if (this.weight > 0 && this.height > 0) {
        const bmi = this.weight / (this.height * this.height);
        this.bmi = bmi.toFixed(2);
      }
    }
  },
  computed: {
    bmiResult() {
      if (this.bmi <= 18.5) {
        return '体重过轻';
      } else if (this.bmi <= 24.9) {
        return '正常';
      } else if (this.bmi <= 29.9) {
        return '体重过重';
      } else {
        return '肥胖';
      }
    }
  }
}
</script>

<style>
.form-info{
  label{
    width: 80px;
    display: inline-block;
  }
}
</style>
